<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>工单列表</title> 
        <link rel="stylesheet" href="css/innerstyle.css">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	    <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
        <script type="text/javascript" src="DataTables/datatables.min.js"></script>
    </head>
    <body>
    <div class="mainborder">
        <form class="form-inline">
            <div style="font-size: 30px; text-align: center;">
                <div class="col-md-3">
                    <label >搜索|</label>
                </div>
                <div class="col-md-3 form-group">
                <label for="exampleInputName2">工单编号</label>
                <input type="text" class="form-control" id="exampleInputName2" placeholder="工单编号">
                </div>
                <div class="col-md-3 form-group">
                <label for="exampleInputEmail2">产品编号</label>
                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="产品编号">
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-default">查询</button>
                </div>
            </div>
        </form>


          <div id="tableDiv" >
            <table id="myTable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>工单编号</th>
                        <th>产品名称</th>
                        <th>产品数量</th>
                        <th>状态</th>
                        <th>开始时间</th>
                        <th>工期（/天）</th>
                        <th>下单时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>123456</td>
                        <td>测试工单</td>
                        <td>1</td>
                        <td>已完成</td>
                        <td>2021-03-10</td>
                        <td>45</td>
                        <td>2020-11-20</td>
                        <td>
                            <button type="submit" class="btn btn-default">查看</button>
                            <button type="submit" class="btn btn-default">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>123456</td>
                        <td>测试工单</td>
                        <td>1</td>
                        <td>已完成</td>
                        <td>2021-03-10</td>
                        <td>45</td>
                        <td>2020-11-20</td>
                        <td>
                            <button type="submit" class="btn btn-default">查看</button>
                            <button type="submit" class="btn btn-default">删除</button>
                        </td>
                    </tr><tr>
                        <td>1</td>
                        <td>123456</td>
                        <td>测试工单</td>
                        <td>1</td>
                        <td>已完成</td>
                        <td>2021-03-10</td>
                        <td>45</td>
                        <td>2020-11-20</td>
                        <td>
                            <button type="submit" class="btn btn-default">查看</button>
                            <button type="submit" class="btn btn-default">删除</button>
                        </td>
                    </tr><tr>
                        <td>1</td>
                        <td>123456</td>
                        <td>测试工单</td>
                        <td>1</td>
                        <td>已完成</td>
                        <td>2021-03-10</td>
                        <td>45</td>
                        <td>2020-11-20</td>
                        <td>
                            <button type="submit" class="btn btn-default">查看</button>
                            <button type="submit" class="btn btn-default">删除</button>
                        </td>
                    </tr><tr>
                        <td>1</td>
                        <td>123456</td>
                        <td>测试工单</td>
                        <td>1</td>
                        <td>已完成</td>
                        <td>2021-03-10</td>
                        <td>45</td>
                        <td>2020-11-20</td>
                        <td>
                            <button type="submit" class="btn btn-default">查看</button>
                            <button type="submit" class="btn btn-default">删除</button>
                        </td>
                    </tr><tr>
                        <td>1</td>
                        <td>123456</td>
                        <td>测试工单</td>
                        <td>1</td>
                        <td>已完成</td>
                        <td>2021-03-10</td>
                        <td>45</td>
                        <td>2020-11-20</td>
                        <td>
                            <button type="submit" class="btn btn-default">查看</button>
                            <button type="submit" class="btn btn-default">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>123456</td>
                        <td>测试工单</td>
                        <td>1</td>
                        <td>已完成</td>
                        <td>2021-03-10</td>
                        <td>45</td>
                        <td>2020-11-20</td>
                        <td>
                            <button type="submit" class="btn btn-default">查看</button>
                            <button type="submit" class="btn btn-default">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>123456</td>
                        <td>测试工单</td>
                        <td>1</td>
                        <td>已完成</td>
                        <td>2021-03-10</td>
                        <td>45</td>
                        <td>2020-11-20</td>
                        <td>
                            <button type="submit" class="btn btn-default">查看</button>
                            <button type="submit" class="btn btn-default">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>123456</td>
                        <td>测试工单</td>
                        <td>1</td>
                        <td>已完成</td>
                        <td>2021-03-10</td>
                        <td>45</td>
                        <td>2020-11-20</td>
                        <td>
                            <button type="submit" class="btn btn-default">查看</button>
                            <button type="submit" class="btn btn-default">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>123456</td>
                        <td>测试工单</td>
                        <td>1</td>
                        <td>已完成</td>
                        <td>2021-03-10</td>
                        <td>45</td>
                        <td>2020-11-20</td>
                        <td>
                            <button type="submit" class="btn btn-default">查看</button>
                            <button type="submit" class="btn btn-default">删除</button>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>123456</td>
                        <td>测试工单</td>
                        <td>1</td>
                        <td>已完成</td>
                        <td>2021-03-10</td>
                        <td>45</td>
                        <td>2020-11-20</td>
                        <td>
                            <button type="submit" class="btn btn-default">查看</button>
                            <button type="submit" class="btn btn-default">删除</button>
                        </td>
                    </tr>

                </tbody>
                </table>
                </div>
    </div>
    
    <script>
        $(document).ready( function () {
            $('#myTable').DataTable({
                "bFilter": false,
                "bLengthChange": false,
                "oLanguage": {
                    "sProcessing": "正在加载中......",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起，查询不到相关数据！",
                    "sEmptyTable": "表中无数据存在！",
                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                    "sSearch": "搜索",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "末页"
                    }
                }
            });
        } );

        
    </script>

    <script>
        var tabSize = tabSize || {};
        tabSize.init = function (id,headTableWrapperId) {
            //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
            var tTD;
            // 获取需要修改列宽的表格
            var table = document.getElementById(id);
            // 获取固定头部的表格
            var tableHead = $('#'+ headTableWrapperId + ' .dataTables_scrollHeadInner table')[0];
            // 获取表格头部th
            var headTh = tableHead.rows[0];
            for (j = 0; j < headTh.cells.length; j++) {
                headTh.cells[j].onmousedown = function () {
                    //记录单元格
                    tTD = this;
                    if (event.offsetX > tTD.offsetWidth - 10) {
                        tTD.mouseDown = true;
                        tTD.oldX = event.x;
                        tTD.oldWidth = tTD.offsetWidth;
                    }
                };
                headTh.cells[j].onmouseup = function () {
                    //结束宽度调整
                    if (tTD == undefined) tTD = this;
                    tTD.mouseDown = false;
                    tTD.style.cursor = 'default';
                };
                headTh.cells[j].onmousemove = function () {
                    //更改鼠标样式
                    if (event.offsetX > this.offsetWidth - 10)
                        this.style.cursor = 'col-resize';
                    else
                        this.style.cursor = 'default';

                    //取出暂存的Table Cell
                    if (tTD == undefined) tTD = this;
                    //调整宽度
                    if (tTD.mouseDown != null && tTD.mouseDown == true) {
                        tTD.style.cursor = 'default';
                        if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
                            tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
                        //调整列宽
                        tTD.style.width = tTD.width + 'px';
                        tTD.style.cursor = 'col-resize';
                        // 调整滚动表格的每个cell
                        for (k = 0; k < table.rows.length; k++) {
                            table.rows[k].cells[tTD.cellIndex].style.width = tTD.style.width;
                        }
                    }
                };
            }
        };
        // 鼠标拖动列宽
        setTimeout(function () {
            // 参数：1.table元素的id，
            // 2.datatable插件生成的最外层div的id，F12可查看到
            tabSize.init('myTable','myTable_wrapper');
        }, 2000);

    </script>
</body>
</html>
